<template>
  <div class="payment_index">
    <div class="payment_index_top">
      <div class="into_index">首页<i class="el-icon-close"></i></div>
      <div class="current">待接单<i class="el-icon-close"></i></div>
    </div>
    <div class="payment_index_bottom">
      <div class="payment_index_bottom_new">
        <div class="payment_index_bottom_new_goods">
          <div class="payment_index_bottom_new_goods_btn">
          </div>
          <div class="payment_index_bottom_new_goods_screening">
            <div class="payment_index_bottom_new_goods_screening_left">
              <i>下单时间</i>
              <el-date-picker v-model="value2"
                              type="datetimerange"
                              :picker-options="pickerOptions"
                              range-separator="至"
                              start-placeholder="开始日期"
                              end-placeholder="结束日期"
                              align="right">
              </el-date-picker>
            </div>
            <div class="payment_index_bottom_new_goods_screening_right">
              <el-input v-model="input"
                        placeholder="请输入订单信息查询"></el-input>
              <button><i class="el-icon-search"></i>搜索</button>
            </div>
          </div>
        </div>
      </div>
      <div class="payment_index_bottom_table_box">
        <div class="payment_index_bottom_table">
          <table>
            <tr>
              <th>序号</th>
              <th>订单号</th>
              <th>下单时间</th>
              <!-- <th>下单人</th> -->
              <th>手机号</th>
             
              <th>操作</th>
            </tr>
            <tr v-for="(v,i) in tableList"
                :key="i">
              <td>{{v.order_code}}</td>
              <td>{{v.order_no}}</td>
              <td>{{v.create_time | dateformat('YYYY-MM-DD HH:mm:ss')}}</td>
              <!-- <td>{{v.realname}}</td> -->
              <td>{{v.phone}}</td>
              <td>
                <button class="editor"
                        @click='_toShopInfo'
                        :data-id="v.id">详情</button>
                <button class="shelves" @click="toReceiv(v.id)">接单</button>
                <button class="delete" @click="cancelOrder(v.id)">关闭</button>
              </td>
            </tr>
            <tr v-if="tableList.length == 0">
              <td class="table_title"
                  colspan="8">当前数据空空如也</td>
            </tr>
          </table>
        </div>
        <div class="payment_index_bottom_page">
          <div class="payment_index_bottom_page_left">
          </div>
          <div class="payment_index_bottom_page_right">
            <el-pagination @size-change="handleSizeChange"
                          @current-change="handleCurrentChange"
                          :current-page="page"
                          :page-sizes="[10, 20, 30, 40]"
                          :page-size="pagesize"
                          layout="total, sizes, prev, pager, next, jumper"
                          :total="total"
                          background>
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
	
	<script>
  // import util from '@/uitls/util';
export default {
  data () {
    return {
      input: '',
      checkAll: false,
      currentPage4: 1,
      checkBoxAll: [],				// 选中的数据
      page: 1,
      pagesize: 10,
      total: 0,
      tableList: [],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
      value2: '',
      sid:null,
    }
  },
  mounted () {
    this.sid = localStorage.getItem('sid')
    console.log(this.sid);
    this._getOrdersList()
   
  },
  methods: {
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`);
      this.pagesize = val;
      this._getOrdersList()
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`);
      this.page = val
      this._getOrdersList()
    },
    hangerInto () {
      this.$router.push({ path: '/paymentDetails' });
    },
    // 获取待接单列表
    _getOrdersList () {
      let params = {
        decoration_id:this.sid,
        status:1,
        keyword:'',
        start_date:'',
        end_date:'',
        page:this.page,
        pagesize: this.pagesize,
      }
      this.$http.post('/api/admin/decoration/DesignOrder/index',params).then(res=>{
           console.log(res, 123);
        if (res.code == 1) {
          this.tableList = res.data.list ? res.data.list : [];
          this.total = res.data.total;  //总条数
        }
      })
      // this.$http.post("/api/admin/shop/productOrder/lst", { store_id: this.sid, order_status: 1, page: this.page, pagesize: this.pagesize }).then(res => {
      //   console.log(res, 123);
      //   if (res.code == 1) {
      //     this.tableList = res.data.data ? res.data.data : [];
      //     this.total = res.data.count;  //总条数
      //   }
      // })
    },
    // 关闭订单按钮
    cancelOrder(order_id){
        this.$confirm('确定要关闭此订单吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
		}).then(()=>{
			let params = {
				id:order_id
			}
			this.$http.post('/api/admin/designer/DesignerOrder/cancel',params).then(res=>{
				console.log(res,'关闭结果');
				if(res.code==1){
					this.$message.success('关闭成功')
                    this._getOrdersList()
				}else{
					this.$message.warning(res.msg)
				}
			})
		}).catch(()=>{})
    },

    // 点击接单
    toReceiv(id){
      this.$http.post('/api/admin/designer/DesignerOrder/accept',{id}).then(res=>{
        console.log(res,'接单结果');
        if(res.code==1){
          this._getOrdersList()
          this.$message.success('接单成功')
        }else{
          this.$message.warning(res.msg)
        }
      })
    },

    //点击详情跳转
    _toShopInfo (e) {
      console.log(e);
      let order_id = e.target.dataset.id;
      this.$router.push({ path: `/receivingDetailsDecora?order_id=${order_id}` })
    }
  },
}
	</script>


<style lang="less" scoped="scoped">
@import "index.less";
</style>
